/*
参数说明：
alertShow-弹出框参数{
  showmsg-服务器弹窗提示
  msg-服务器提示内容
}
  shopHeigth-根据手机显示率动态计算滚动显示内容框高度
  checklist-购物车内商品List数组
  dataTime-倒计时时间
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <alert v-model="alertTel.showmsg" :title="'手机绑定'" @on-show="onTelShow" @on-hide="onTelHide">{{alertTel.msg}}</alert>
    <!--<div v-if="showCar===true" id="timeId" style="padding: 5px" >-->
    <!--<clocker  v-if="dataTime!==''" :time="dataTime" slot="value">-->
    <!--&lt;!&ndash;<span class="day">%_D1</span>&ndash;&gt;-->
    <!--&lt;!&ndash;<span class="day">%_D2</span>天&ndash;&gt;-->
    <!--&lt;!&ndash;<span class="day">%_H1</span>&ndash;&gt;-->
    <!--&lt;!&ndash;<span class="day">%_H2</span>时&ndash;&gt;-->
    <!--<icon type="waiting_circle"></icon>&nbsp&nbsp请在-->
    <!--<span class="day">%_M1</span>-->
    <!--<span class="day">%_M2</span>分-->
    <!--<span class="day">%_S1</span>-->
    <!--<span class="day">%_S2</span>秒内提交订单-->
    <!--</clocker>-->
    <!--</div>-->
    <!--<x-header style="background-color:#3d82e5;width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="{showBack: true}">-->
      <!--<p name="content">购物车</p>-->
    <!--</x-header>-->
    <template>
      <div :style="boxStyle">
        <div v-if="showCar===false" style="text-align: center;margin-top: 50%">
          <p style="font-size: 14px">你的购物车为空，请到<a href="javaScritp:" @click="goShopMallfn">商城中购买</a></p>
        </div>
        <shopList v-for="item in checklist" :isCheck="false">
          <div slot="img" style="margin: 0 5px;text-align: center">
            <img :src="item.itemUrl"  height="80px">
          </div>
          <p slot="shopName">{{item.itemName}}</p>
          <p slot="left" style="float: left;">￥{{item.price}}</p>
          <div slot="right" style="text-align: center;">
            <x-number :title="''" :min="1"  :value="item.count" @click.native="shopCountFn(item.id)" width="30px"  @on-change="CountFn"></x-number>
            <img style="text-align: center;padding: 5px" @click="deleteFn(item.id)" src="../../../../src/assets/images/shopCar/delete.png" >
          </div>
        </shopList>
      </div>
    </template>
      <!--<checklist  required :options="commonList" v-model="checklist001" ></checklist>-->
    <div v-if="showCar===true" style="width: 100%;height: 50px;background-color: #ffffff">
      <div style="border-bottom: 1px solid #a9a9a9;"></div>
      <flexbox :gutter="20"  wrap="nowrap" >
        <flexbox-item :span="7">
          <div style="text-align: right;">
            <p style="color: #a9a9a9;padding-top: 10px;display: inline-block;font-weight: bold;">总计:</p>
            <p style="color: #ff0e04;padding-top: 10px;display: inline-block">￥{{total}}</p>
          </div>
        </flexbox-item>
        <flexbox-item :span="4"><div style="padding-top: 3px"><x-button @click.native="shopCleanfn" style="background-color: #f95320;color: #ffffff;width: 100px;font-size: 15px;" >去结算</x-button></div></flexbox-item>
      </flexbox>
    </div>
  </div>
</template>
<script>
  import { Clocker, Icon, Flexbox, FlexboxItem, XButton, XNumber, Scroller, Group, Alert, XInput, XHeader } from 'vux'
  import shopList from '../../../components/shopCart/ShopCart_Q.vue'
//  import $ from 'jquery'
  import * as urls from '../../../api/urls'

  export default {
    components: {
      Clocker,
      Icon,
      Flexbox,
      XButton,
      FlexboxItem,
      shopList,
      XNumber,
      Scroller,
      Alert,
      Group,
      XInput,
      XHeader
    },
    mounted: function () {
      this.timeFn()
      if (this.showCar === true) {
        this.windowHeghtFn()
      }
      document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
      this.$root.$el.__vue__.setSel()
      this.getShopList()
      this.weixinfn36()
      let clientHeight = parseInt(document.body.clientHeight)
      this.boxStyle = 'overflow-x: hidden;overflow-y: auto;height: ' + (clientHeight - 96) + 'px;padding-top: 0'
    },
    data () {
      return {
        boxStyle: 'height: 300px;overflow-x: hidden;overflow-y: auto;',
        alertShow: {
          showmsg: false,
          msg: ''
        },
        alertTel: {
          showmsg: false,
          msg: ''
        },
//        allList: [ '全选' ],
        shopHeigth: '',
        checklist: [],
        dataTime: '',
        numberId: '',
        total: '',
        showCar: ''
      }
    },
    methods: {
      weixinfn36 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      getShopList () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.carList, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.list.length !== 0) {
              that.checklist = res.data.list
              that.total = res.data.total
              that.showCar = true
            } else {
              that.showCar = false
              that.total = 0
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      shopCountFn (id) {
        this.numberId = id
      },
      CountFn (val) {
        let itmeId = this.numberId
        if (itmeId === '') {
          // 初始化进来还未点击 ID 为空
          return
        }
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.adjustCount, {userId: userId, id: itmeId, count: val}, function (res) {
          if (res.status === 100) {
            that.total = res.data.total
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      setShopCarNum () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.cartAndSign, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.cartCount !== 0) {
              that.$root.$children[0].$data.shopCarNum = res.data.cartCount.toString()
            } else {
              that.$root.$children[0].$data.shopCarNum = ''
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      deleteFn (id) {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.deleteFromCart, {userId: userId, id: id}, function (res) {
          if (res.status === 100) {
            that.setShopCarNum()
            if (res.data.total !== null) {
              that.total = res.data.total
              that.showCar = true
            } else {
              that.showCar = false
              that.total = 0
            }
            for (let i = 0; i < that.checklist.length; i++) {
              if (that.checklist[i].id === id) {
                that.checklist.splice(i, 1)
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      timeFn () {
        let myDate = new Date()
        myDate.setMinutes(myDate.getMinutes() + 15)  // 当前时间加15分钟
        this.dataTime = myDate.getFullYear() + '-' + parseInt(myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes()
//        this.dataTime = myDate
      },
      windowHeghtFn () {
        // 可见窗口高度
        let clientHeight = parseInt(document.body.clientHeight)
        // 时间倒计时高度
//        let timeIdHeight = parseInt($('#timeId')[0].clientHeight)
        // 顶部菜header
//      let headerHeight = 38
        // 底部菜单高度
        let bottomHeight = 120
        this.shopHeigth = (clientHeight - bottomHeight) + 'px'
      },
      goShopMallfn () {
        this.$router.push({
          path: '/content/shoppingMall/ShoppingMall'
        })
        this.$router.go(1)
      },
      shopCleanfn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.userIndex, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.user.tel !== '' && res.data.user.tel !== null && res.data.user.tel !== undefined) {
              that.$router.push({
                path: '/shoppingCar/Clean'
              })
              that.$router.go(1)
            } else {
              that.alertTel.showmsg = true
              that.alertTel.msg = '请先绑定手机号'
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      onTelShow () {
        // 手机未绑定弹窗出现时触发
      },
      onTelHide () {
        // 手机未绑定弹窗关闭时触发
        this.$router.push({
          path: '/UserInformation'
        })
        this.$router.go(1)
      }
    }
  }
</script>
<style scoped="scoped">
  .day {
    background-color:#000;
    color:#fff;
    padding:0 3px;
    border-radius:3px;
  }
  .weui_cell {
    padding: 0 5px 0 0;
    display: inline-block;
  }
</style>
